<template>
<div class="index" :style="backgroundDiv">
  <mt-field label="用户ID"  v-model=" this.person.id"></mt-field>
  <mt-field label="用户名"  v-model=" this.person.username"></mt-field>
  <mt-field label="邮箱"  type="email" v-model="this.person.email"></mt-field>
  <input type="button" value="返回" class="mybtn mymargin" v-on:click="back"><br><br>
</div>
</template>

<script>
    import store from "../store/store";

    export default {
      name: "Person",
      data() {
        return {
          person: {
            id: {},
            email: null,
            username: null,
            password: null,
          },
          backgroundDiv: {
            backgroundImage:'url(' + require('../assets/pic01.png') + ')',
            backgroundRepeat:'no-repeat',
            backgroundSize:'100% 100%',
            with:'100px',
            height:'810px'
          },
        }
      },
      methods: {
        back(){
          this.$router.go(-1)
        },
        pserson() {
          var params = new URLSearchParams()
          params.append('uid', store.state.id)
          this.$axios.post('/login',)
            .then(res => {
              if (res.data.code === 200) {
                this.$store.commit('SET_TOKEN', true)
                this.$store.commit('GET_USERNAME', res.data.data.username)
                this.$store.commit('SET_ID', res.data.data.id)
                this.$message({
                  message: '登陆成功',
                  type: 'success'
                })
                this.$router.push({'path': '/home'})
              } else {
                this.$message({
                  message: '登陆失败',
                  type: 'error'
                })
              }
            })
        },
        setperson() {
          console.log('===============')
          // console.log(store.state.user)
          this.person.id=store.state.id
          this.person.email=store.state.email
          this.person.username=store.state.username
        }
      },
      created() {

        this.setperson()
      }
    }
</script>

<style scoped>
.index{
  margin: 0;
}
.mybtn{
  width:20%;height:40px;border:2px #f7f4f2 ;float:left;
  background-color: #faf7f5;
}
.mymargin{margin-top:450px;}
  .mystar{
    background-color:black;
    background-image:
      radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
      radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
      radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
      radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
    background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
    background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
  }
  .mytable{
    border-top: 2px solid #e8e5e3;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
  }
</style>
